<template>
    <div class="treeWrapper">
        <el-row type="flex" justify="space-between">
            <el-col :span="14">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDict">添加分类</el-button>
            </el-col>
            <el-col :span="10" class="moreMenu">
                <el-dropdown trigger="click" @command="handleCommand">
                    <el-button size="mini">
                    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">编辑分类</el-dropdown-item>
                    <el-dropdown-item command="delete">删除分类</el-dropdown-item>
                    <el-dropdown-item command="refresh">刷新</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
        <!-- <el-alert type="info" class="alert-tip" :closable="false">
            <span class="select-title">{{editTitle}}</span>
            <div slot="title" class="slot-title">
                <span class="txt">当前选择：</span>
                <a v-if="editTitle" @click="cancelEdit" class="select-clear">取消选择</a>
            </div>
        </el-alert> -->
        <el-input v-model="filterText" placeholder="输入搜索字典分类" clearable class="search"></el-input>
        <div class="tree-bar">
            <el-tree
            :data="treeData"
            :props="defaultProps"
            :highlight-current="true"
            node-key="id"
            :default-expanded-keys="expandedArr"
            ref="treeBox"
            class="elTree"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            accordion
            v-loading="loading"
            ></el-tree>
        </div>
        <AddDict :propAddDict="propAddDict" @updateTree="updateTree"></AddDict>
        <EditDict :propEditDict="propEditDict" @updateTree="updateTree"></EditDict>
    </div>
</template>
<script>
import { getDictTreeAll, getDictTree, deleteDictTreeNode } from '@/api/tools/dict.js';
import AddDict from './AddDict.vue';
import EditDict from './EditDict.vue';
export default {
    data() {
        return {
            loading: false,
            treeData: [], // 分类树data
            expandedArr: [], // 分类树默认展开的节点
            editTitle: '',
            filterText: '',
            defaultProps: {
                label: "label",
                children: "children"
            },
            propAddDict: { // 传给添加字典组件的值
                dictDialogFormVisible: false,
                id: ''
            },
            propEditDict: { // 传给编辑字典组件的值
                dictDialogFormVisible: false,
                id: ''
            }
        }
    },
    components: {
        AddDict,
        EditDict
    },
    watch: {
        filterText(val) {
            this.$refs.treeBox.filter(val);
        }
    },
    mounted() {
        this.getDictTree([]) 
    },
    methods: {
        // 更多菜单选择
        handleCommand(command) {
            const that = this
            if (command === 'edit') {
                that.handleEditDict()
            }
            if (command === 'delete') {
                that.handleDeleteDict()
            }
            if (command === 'refresh') {
                that.handleRefreshDict()
            }
        },

        /**点击树节点 */
        handleNodeClick(data, node) {
            const that = this
            that.propAddDict = {
                dictDialogFormVisible: false,
                id: data.data.id,
            }
            that.propEditDict = {
                dictDialogFormVisible: false,
                id: data.data.id
            }        
            that.editTitle = data.data.typeName
            let tableObj = {
                id: data.data.id,
                typeCode: data.data.typeCode,
                typeName: data.data.typeName
            }
            that.$emit("handleClickTreeNode", tableObj)
        },

        /** 树的一次性加载 */
        getDictTree(arr) {
            const that = this
            that.loading = true
            getDictTreeAll().then(res => {
                if(res.code == 0) {
                    that.treeData = res.data
                    that.expandedArr = arr
                    that.loading = false
                } else {
                    that.$message.error(res.message)
                }
            })
        },

        /** 添加分类组件和编辑分类组件回传更新分类数 */
        updateTree(str) {
            const that = this
            let expandedArr = []
            if (that.editTitle) {
                let curr = that.$refs.treeBox.getCurrentNode()
                if (str == 'add') {
                    expandedArr.push(curr.data.id)
                } else {
                    if (curr.data.parentId) {
                        expandedArr.push(curr.data.parentId)
                    }
                }
            }        
            that.getDictTree(expandedArr)
            that.cancelEdit()  
        },
        
        /** 添加分类 */
        handleAddDict() {
            const that = this
            let propAddDict = that.propAddDict
            propAddDict.dictDialogFormVisible = true
            that.propAddDict = JSON.parse(JSON.stringify(propAddDict))
        },

        /** 编辑分类 */
        handleEditDict() {
            const that = this
            if (that.editTitle) {
                let propEditDict = that.propEditDict
                propEditDict.dictDialogFormVisible = true
                that.propEditDict = JSON.parse(JSON.stringify(propEditDict))
            } else {
                that.$message.warning('请选择一条需要编辑的分类')
            }
        },

        /** 删除分类 */
        handleDeleteDict() {
            const that = this
            if (that.editTitle) {
                that.$confirm('是否确定删除该分类吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDictTreeNode(that.propEditDict.id).then(res => {
                        if (res.code == 0) {
                            let curr = that.$refs.treeBox.getCurrentNode()
                            let expandedArr = []
                            if (curr.data.parentId) {
                                expandedArr.push(curr.data.parentId)
                            } 
                            that.getDictTree(expandedArr)
                            that.cancelEdit()                          
                            that.$message.success('删除成功')
                        } else {
                            that.$message.error(res.message)
                        }
                    })
                })
            } else {
                that.$message.warning('请选择一条需要删除的分类')
            }
        },

        /** 取消选择 */
        cancelEdit() {
            const that = this
            that.$refs.treeBox.setCurrentKey()
            that.editTitle = ''
            that.propAddDict = {
                dictDialogFormVisible: false,
                id: ''
            }
            that.propEditDict = {
                dictDialogFormVisible: false,
                id: ''
            }
            that.$emit("cancleClickTreeNode")
        },

        /** 搜索字典 */
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        /** 刷新字典 */
        handleRefreshDict() {
            const that = this
            that.getDictTree([])
            that.cancelEdit()
        }
    }
}
</script>
<style lang='scss' scoped>
.alert-tip {
    background-color: #f0faff;
    border: 1px solid #abdcff;
    margin-top: 10px;
    font-size: 10px;
    margin-bottom: 10px;
}
.search {
  margin: 15px 0 5px;
}
.select-title {
    font-size: 14px;
    font-weight: 600;
    color: #40a9ff;
}
.select-clear {
    color: #4043ff;
    float: right;
}
.tree-bar {
    margin-top: 10px;
}
.is-big {
  font-size: 14px !important;
  width: 28px;
}
label {
  font-weight: 400 !important;
}

.treeWrapper {
    height: 100%;
}
.treeWrapper .tree-bar {
    width: 100%;
    height: calc(100% - 150px);
    overflow: auto;
}
.elTree{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
.treeWrapper /deep/ .el-alert {
    padding: 8px 5px;
}
.slot-title {
    width: 100%;
}
.treeWrapper /deep/ .el-alert__content {
    width: 100%;
}
.moreMenu {
    text-align: right;
}
</style>
